import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'

export const useLazyData = (api) => {
  const targetIsVisible = ref(false)
  const target = ref(null)
  const goods = ref([])
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }], observerElement) => {
      targetIsVisible.value = isIntersecting
      console.log(targetIsVisible.value)
      if (targetIsVisible.value) {
        api().then(({ result }) => {
          goods.value = result
          console.log(goods.value)
        })
        stop()
      }
    }
  )
  return { goods, target }
}
